<!doctype html>
<html lang="en">
<head>
    <title>广州市老旧小区微改造规划设计方案竞赛</title>
    <link rel="import" href="/src/page/head.html?__inline">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="/src/css/mobile.less">
    <script src="/src/lib/flexible.js"></script>
</head>
<body>
<!--头部导航-->
<link rel="import" href="/src/page/nav.html?__inline">

<!--内容-->
<div class="c-content c-works">
    <div class="c-title">
        <span>参赛作品</span>
    </div>
    <div class="center">
        <div class="left">
            <!--<div class="hint">注：每天每个ip只能投一次票</div>-->
            <ul class="lists disNone">
                <li v-for="(list,i) in lists">
                    <div class="img" v-bind:style="{'background-image': 'url('+list.cover+')'}" v-on:click="toPage(list.id)"></div>
                    <div class="info">
                        <div class="vote" @click="vote(list.id,i)">投TA一票</div>
                        <div class="text">
                            <span>成果编号：<b>{{list.flag}}</b></span><br>
                            <p>报名单位/个人：{{list.signup}}</p>
                        </div>
                        <div class="num"><i>{{list.piao}}</i> 票</div>
                        <button class="btn" type="button" v-on:click="toPage(list.id)">查看作品 >></button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="rule disNone">
            <ul class="items" v-if="items">
                <li :class="{active : index==i}" v-for="(item,i) in items" v-on:click="changelist(i)">
                    <span>{{item.title}}</span>
                </li>
            </ul>
            <div class="title">竞赛方式</div>

            <div class="area">
                本次竞赛采取报名海选竞赛形式，通过在市城市更新局发布报名公告，公开接受国内外设计单位(个人/团体)的网上报名。
                由评审专家组对报名的设计单位(个人/团体)进行作品评选，5个项目各选出4家设计单位(个人/团体)再进行公众网络投票和相关老旧小区居民现场投票评选，按照综合评分（专家评审得分70%+公众网络投票得分10%+相关老旧小区居民现场投票得分20%）确定获奖排名。
            </div>
        </div>
    </div>
</div>

<!--底部-->
<link rel="import" href="/src/page/footer.html?__inline">
<script>
    var app = new Vue({
        el: '.c-works',
        data : {
            items : '',
            lists : '',
            lock : true,
            index : location.search.split('=')[1] ? location.search.split('=')[1] : 0
        },
        mounted : function () {
            this.getlists()
        },
        methods : {
            getlists : function () {
                var _this = this;
                $.ajax({
                    url:'http://zt4.oeeee.com/www/ExtraDataVote/getData/db/2017jlgzwtp',
                    datatype : "jsonp",
                    jsonp : 'callback',
                    success : function (json) {
                        if(typeof json == 'string'){
                            json = JSON.parse(json);
                        }
                        if(json.status==0){
                            _this.items = json.data;
                            _this.lists = _this.items[_this.index].data;
                            $('.disNone').removeClass('disNone');
                        }
                    }
                })
            },
            vote : function (id,index) {
                var _this = this;
                if(!this.lock) return;
                this.lock = false;
                $.ajax({
                    url:'http://zt4.oeeee.com/www/ExtraDataVote/jsonp4Piao/db/2017jlgzwtp/verify/8888/id/'+id/*+'?ztndsid='+_this.sessionId*/,
                    datatype : "jsonp",
                    jsonp : 'callback',
                    success : function (json) {
                        if(typeof json == 'string'){
                            json = JSON.parse(json);
                        }
                        if(json.status==0){
                          _this.lists[index].piao++;
                            swal({title: "投票成功！", type: "success"});
                        }else{
                            swal({title: json.msg, type: "warning"});
                        }
                        _this.lock = true;
                    }
                })
            },
            changelist : function (index) {
                this.index = index;
                this.lists = this.items[index].data;
            },
            toPage : function (id) {
                window.open('works-detail.html?id='+id);
            }
        }
    })
</script>
</body>
</html>